<template>
  <div id="china_map_box">
    <div id="china_map"></div>
  </div>
</template>

<script>
  import echarts from "echarts";
  import '@/utils/echartsAllMap'
  import {centigradeFind} from '@/api/centigrade'

  export default {
    data() {
      return {
        //echart 配制option
        options: {
          title: {
            text: '全国天气信息',
            subtext: '单位/℃'
          },
          tooltip: {
            formatter: function (params, ticket, callback) {
              if (isNaN(params.value)) {
                return params.seriesName + '<br />未录入数据'
              } else {
                return params.seriesName + '<br />' + params.name + ': ' + params.value + ' ℃'
              }
            }//数据格式化
          },
          visualMap: {
            min: 0,
            max: 1500,
            left: 'left',
            top: 'bottom',
            text: ['高', '低'],//取值范围的文字
            inRange: {
              color: ['#e0ffff', '#006edd']//取值范围的颜色
            },
            show: true//图注
          },
          geo: {
            map: '广西',
            roam: false,//不开启缩放和平移
            zoom: 1.23,//视角缩放比例
            label: {
              normal: {
                show: true,
                fontSize: '10',
                color: 'rgba(0,0,0,0.7)'
              }
            },
            itemStyle: {
              normal: {
                borderColor: 'rgba(0, 0, 0, 0.2)'
              },
              emphasis: {
                areaColor: '#F3B329',//鼠标选择区域颜色
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                shadowBlur: 20,
                borderWidth: 0,
                shadowColor: 'rgba(0, 0, 0, 0.3)'
              }
            }
          },
          series: [
            {
              name: '今日温度',
              type: 'map',
              geoIndex: 0,
              data: [],
            }
          ]
        },
        //echart data
        dataList: []
      };
    },
    methods: {
      //初始化中国地图
      initEchartMap() {
        let mapDiv = document.getElementById('china_map');
        let myChart = echarts.init(mapDiv);
        myChart.setOption(this.options);
      },
      //修改echart配制
      setEchartOption() {
        this.options.series[0]['data'] = this.dataList;
      },
      updateMap(key) {
        let _this = this;
        this.options.geo.map = key;
        this.$nextTick(() => {
          const loading = this.$loading({
            text: '加载中...',
            target: document.querySelector('#china_map_box')
          });
          centigradeFind({areaKey: key}).then(response => {
            _this.dataList = response.data;
            _this.setEchartOption();
            this.initEchartMap();
          }).finally(() => {
            loading.close()
          })
        })
      }
    },
    created() {
      this.setEchartOption();
    },
    mounted() {
    }
  };
</script>

<style scoped>
  #china_map_box {
    width: 800px;
    height: 600px;
    margin: 20px auto;
    position: relative;
  }

  #china_map_box #china_map {
    height: 100%;
  }

  #china_map_box .china_map_logo {
    position: absolute;
    top: 0;
    left: 0;
    width: 45px;
  }

  #china_map .tooltip_style {
    line-height: 1.7;
    overflow: hidden;
  }

  #china_map .tooltip_left {
    float: left;
  }

  #china_map .tooltip_right {
    float: right;
  }
</style>
